<template>
    <h1>执行动画效果</h1>
    <div ref="box" class="box">Hello,World!</div>
</template>
    
<script setup>
    import { ref,onMounted } from "vue";

    const box = ref(null)

    onMounted(()=>{
        //在组件挂载后执行动画效果
        box.value.style.transition = 'transform 1s'
        box.value.style.transform = 'translateX(100px)'
    })
</script>
    
<style>
    .box{
        width: 100px;
        height: 100px;
        background-color: lightblue;
    }
</style>